import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import Hello from './Hello';
import RouteDemo from './RouteDemo'
import Comment from './Comment'
import { createBrowserRouter, RouterProvider, HashRouter, Route, Routes, Navigate, useRoutes} from 'react-router-dom'

function RedirectToReact() {
  return <h2>欢迎学习Vue课程{<Navigate to={'/hello'} />}</h2>
}
const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(
//   <React.StrictMode>
//       <App />
//   </React.StrictMode>
// );

// http://localhost:3000/#/routeDemo/2
// root.render(
//   <HashRouter>
//     <Routes>
//       <Route path='/' element={<App/>}></Route>
//       <Route path='/hello' element={<Hello/>}></Route>
//       <Route path='/comment' element={<Comment/>}></Route>
//       <Route path='/vite' element={<Navigate to={'/comment'} />}></Route>
//       <Route path='/routeDemo/:id' element={<RouteDemo/>}></Route>
//       <Route path='/redict' element={<RedirectToReact/>}></Route>
//     </Routes>
//   </HashRouter>
// );
// 创建路由 http://localhost:3000/hello
const routers = [
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/vite",
    element: <Navigate to={'/comment'} />,
  },
  {
    path: "/hello",
    element: <Hello/>
  },
  {
    path: "/comment",
    element: <Comment/>,
    children: [
      {
        path: 'list',
        element: (
          <div>
            <p>commnet1</p>
            <p>commnet2</p>
          </div>
        )
      },
      {
        path: 'detail',
        element: (
          <div>
            <p>commnetDetail1</p>
            <p>commnetDetail2</p>
          </div>
        )
      }
    ]
  },
  {
    path: "/routeDemo/:id",
    element: <RouteDemo/>
  },
  {
    path: "/redict",
    element: <RedirectToReact/>
  },
  {
    path: "*",
    element: <RouteDemo />
  },
]
// const router = createBrowserRouter(routers);
// root.render(
//   <RouterProvider router={router} />
// );
function Router() {
  return useRoutes(routers)
}
//http://localhost:3000/#/comment/detail
root.render(
  <HashRouter>
    <Router/>
  </HashRouter>
);